<template>
  <div>
    <div class="title">
      <el-col :span="1" style="width: 50px;">
        <span style="color:#757575;">位置 :</span>
      </el-col>
      <el-col :span="20">
        <span @click="tableshow" class="hand" :class="{'textactive' : !secondshow}">{{title}}</span>
        <span v-if="secondshow" :class="{'textactive' : secondshow}">> {{secondtitle}}</span>
      </el-col>
    </div>

    <div class="team">
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <!-- team -->

          <el-col style="width:49.5%;float：left;">
            <!-- team结构 -->
            <p style="font-size:26px;color:#111111;text-align:center;margin:20px 0;">添加Team结构</p>
            <div>
              <el-tree
                class="filter-tree treetest"
                :data="data2"
                :props="props"
                node-key="id"
                default-expand-all
                :filter-node-method="filterNode"
                :show-checkbox="true"
                :expand-on-click-node="true"
                ref="tree3"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span style="color:#111111">{{ node.label }}</span>
                  <span>
                    <el-button
                      style="height:24px"
                      type="primary"
                      size="mini"
                      plain
                      @click.stop="()=>handleOpen(data)"
                    >添加</el-button>
                    <el-button
                      style="height:24px"
                      type="warning"
                      size="mini"
                      plain
                      @click.stop="()=>edit(data)"
                    >编辑</el-button>
                    <el-button
                      type="danger"
                      style="height:24px"
                      size="mini"
                      plain
                      @click.stop="()=>remove(data)"
                    >删除</el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </el-col>
          <el-col style="width:7px;float:left;background-color:#f4f7f9;height:700px"></el-col>
          <!-- 组织 -->
          <el-col style="width:49.5%;float:right;">
            <!-- 添加组织结构 -->
            <p style="font-size:26px;color:#111111;text-align:center;margin:20px 0;">添加组织结构</p>
            <div>
              <el-tree
                class="filter-tree treetest"
                :data="data1"
                :props="defaultProps"
                node-key="id"
                default-expand-all
                :filter-node-method="filterNode"
                :show-checkbox="true"
                :expand-on-click-node="true"
                ref="tree3"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span style="color:#111111">{{ node.label }}</span>
                  <span>
                    <el-button
                      style="height:24px"
                      type="primary"
                      size="mini"
                      plain
                      @click.stop="()=>handleOpen1(data)"
                    >添加</el-button>
                    <el-button
                      style="height:24px"
                      type="warning"
                      size="mini"
                      plain
                      @click.stop="()=>edit1(data)"
                    >编辑</el-button>
                    <el-button
                      style="height:24px"
                      type="danger"
                      plain
                      size="mini"
                      @click.stop="()=>remove1(data)"
                    >删除</el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </el-col>
        </el-col>
      </el-row>

      <!--team弹出框添加  -->
      <el-dialog
        class="addP"
        title="添加team结构"
        :visible.sync="addvisiable"
        width="30%"
        @close="handleClose"
      >
        <el-form :model="addform" ref="addform" :rules="addformrules">
          <el-form-item label="请输入team结构的id" style="font-weight:bold" v-if="!isShow">
            <el-input
              v-model.trim="addform.tid"
              autocomplete="off"
              placeholder="请输入数字样式"
              :disabled="isShow"
            ></el-input>
          </el-form-item>
          <el-form-item label="请输入team结构的名称" prop="name" style="font-weight:bold">
            <el-input v-model.trim="addform.name" autocomplete="off" placeholder="请输入名称"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button type="primary" class="sure" round @click="addteam('addform')">确定</el-button>
          <el-button round class="cancel" @click="handleClose">取 消</el-button>
        </span>
      </el-dialog>

      <!--组织弹出框添加  -->
      <el-dialog
        class="addP"
        title="添加组织结构"
        :visible.sync="addvisiable1"
        width="30%"
        @close="handleClose1"
      >
        <el-form :model="addformO" ref="addformO" :rules="addformrules1">
          <!-- <el-form-item label="请输入组织结构的id">
              <el-input v-model.trim="addformO.tid" autocomplete="off" placeholder="请输入数字"></el-input>
          </el-form-item>-->
          <el-form-item label="请输入组织结构的名称" prop="name" style="font-weight:bold">
            <el-input v-model.trim="addformO.name" autocomplete="off" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="请输入负责人" prop="leader" style="font-weight:bold">
            <el-input v-model.trim="addformO.leader" autocomplete="off" placeholder="请输入负责人"></el-input>
          </el-form-item>
          <el-form-item prop="teamId">
            <el-col>
              <span style="font-weight:bold">
                <span style="color:#F56C6C;">*</span>请选择所属Team
              </span>
            </el-col>
            <el-select placeholder="请选择所属Team" v-model.trim="addformO.teamId">
              <el-option
                v-for="(item,index) in teams"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="value">
            <el-col>
              <span style="font-weight:bold">
                <span style="color:#F56C6C;">*</span>请选择所属部门
              </span>
            </el-col>
            <el-select placeholder="请选择所属部门" v-model.trim="addformO.value">
              <el-option
                v-for="(item,index) in companylist"
                :key="index"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="direction">
            <el-col>
              <span style="font-weight:bold">
                <span style="color:#F56C6C;">*</span>
                请选择数据字典方向
              </span>
            </el-col>
            <el-select placeholder="请选择数据字典方向" v-model.trim="addformO.direction">
              <el-option
                v-for="(item,index) in dictionarylist"
                :key="index"
                :label="item.dictionaryName"
                :value="item.dictionaryName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button type="primary" class="sure" round @click="addteam1('addformO')">确定</el-button>
          <el-button round class="cancel" @click="handleClose1">取 消</el-button>
        </span>
      </el-dialog>

      <!--team弹出框编辑  -->
      <el-dialog
        class="addP"
        title="编辑team结构"
        :visible.sync="addvisiable2"
        width="30%"
        @close="handleClose2"
      >
        <el-form :model="editform" ref="editform" :rules="addformrules2">
          <!-- <el-form-item label="请输入team结构的id" style="font-weight:bold">
            <el-input v-model.trim="editform.tid" autocomplete="off" :disabled="isShow"></el-input>
          </el-form-item> -->
          <el-form-item label="请修改team结构的名称" prop="name" style="font-weight:bold">
            <el-input v-model.trim="editform.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button type="primary" class="sure" round @click="editteam('editform')">确定</el-button>
          <el-button round class="cancel" @click="handleClose2">取 消</el-button>
        </span>
      </el-dialog>

      <!--组织弹出框编辑  -->
      <el-dialog
        class="addP"
        title="编辑组织结构"
        :visible.sync="addvisiable3"
        width="30%"
        @close="handleClose3"
      >
        <el-form :model="editformO" ref="editformO" :rules="addformrules3">
          <el-form-item label="请修改组织结构的名称" prop="name" style="font-weight:bold">
            <el-input v-model.trim="editformO.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="请修改负责人" prop="leader" style="font-weight:bold">
            <el-input v-model.trim="editformO.leader" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="teamId">
            <el-col>
              <span style="font-weight:bold">请修改所属Team</span>
            </el-col>
            <el-select autocomplete="off" v-model.trim="editformO.teamId">
              <el-option
                v-for="(item,index) in teams"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="value">
            <el-col>
              <span style="font-weight:bold">
                <span style="color:#F56C6C;">*</span>
                请选择所属部门
              </span>
            </el-col>
            <el-select placeholder="请选择所属部门" v-model.trim="editformO.value">
              <el-option
                v-for="(item,index) in companylist"
                :key="index"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="direction">
            <el-col>
              <span style="font-weight:bold">
                <span style="color:#F56C6C;">*</span>
                请选择数据字典方向
              </span>
            </el-col>
            <el-select placeholder="请选择数据字典方向" v-model.trim="editformO.direction">
              <el-option
                v-for="(item,index) in dictionarylist"
                :key="index"
                :label="item.dictionaryName"
                :value="item.dictionaryName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button type="primary" class="sure" round @click="editteam1('editformO')">确定</el-button>
          <el-button round class="cancel" @click="handleClose3">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
export default {
  name: "teamconfigure",
  data() {
    return {
      secondtitle: "",
      title: "添加组织",
      secondshow: false,
      data1: [],
      data2: [],
      addvisiable: false,
      addvisiable1: false,
      addvisiable2: false,
      addvisiable3: false,
      isShow: false,
      addform: {
        id: "",
        pid: "",
        tid: "",
        name: ""
      },
      editform: {
        id: "",
        pid: "",
        tid: "",
        name: ""
      },
      addformO: {
        id: "",
        pid: "",
        name: "",
        leader: "",
        teamId: "",
        value: "",
        direction: ""
      },
      teams: [],
      companylist: [],
      dictionarylist: [],
      editformO: {
        id: "",
        pid: "",
        name: "",
        leader: "",
        teamId: "",
        value: "",
        direction: ""
      },
      defaultProps: {
        children: "childCompany",
        label: "name"
      },
      props: {
        children: "childTeam",
        label: "name" //与后台字段相同
      },
      addformrules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        tid: [{ required: true, message: "请输入tid", trigger: "blur" }]
      },
      addformrules1: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        // leader: [{ required: true, message: "请输入您的姓名", trigger: "blur" }],
        teamId: [
          { required: true, message: "请选择所属Team", trigger: "change" }
        ],
        value: [
          { required: true, message: "请选择所属部门", trigger: "change" }
        ],
        direction: [
          { required: true, message: "请选择数据字典方向", trigger: "change" }
        ]
      },
      addformrules2: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }]
      },
      addformrules3: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        value: [
          { required: true, message: "请选择所属部门", trigger: "change" }
        ],
        direction: [
          { required: true, message: "请选择数据字典方向", trigger: "change" }
        ]
      }
    };
  },
  created() {
    this.success();
    // 获取所属部门的下拉框数据
    axios.post(this.url + "/sysuser/getCompanyRel").then(res => {
      this.unlogin(res.data.code);
      if (res.data.code == 200) {
        this.companylist = res.data.data;
      }
    });
    // 获取数据字典方向的下拉框数据
    axios.post(this.url + "/sysuser/getmainlist").then(res => {
      this.unlogin(res.data.code);
      if (res.data.code == 200) {
        this.dictionarylist = res.data.data;
      }
    })
  },
  methods: {
    success() {
      axios.get(this.url + "/sysuser/selectUserCompany").then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.data1 = res.data.data;
        }
      });
      axios.get(this.url + "/sysuser/selectCompanyTeam").then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.data2 = res.data.data;
        }
      });
    },
    // 打开添加team结构的弹窗
    handleOpen(data) {
      this.addvisiable = true;
      document.documentElement.style.overflow = "hidden";
      this.addform.id = data.id;
      this.addform.pid = data.pid;
      if (this.addform.id != 2) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    // 打开添加组织结构的弹窗
    handleOpen1(data) {
      this.addvisiable1 = true;
      document.documentElement.style.overflow = "hidden";
      this.addformO.id = data.id;
      this.addformO.pid = data.pid;
      axios
        .post(this.url + "/sysuser/getTeamAll", {
          id: this.addformO.id
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.teams = res.data.data;
          }
        });
      //
    },
    edit(data) {
      this.addvisiable2 = true;
      document.documentElement.style.overflow = "hidden";
      this.editform.id = data.id;
      this.editform.pid = data.pid;
      this.editform.tid = data.tid;
      this.editform.name = data.name;
      this.isShow = true;
    },
    edit1(data) {
      this.addvisiable3 = true;
      document.documentElement.style.overflow = "hidden";
      this.editformO.id = data.id;
      this.editformO.pid = data.pid;
      this.editformO.name = data.name;
      this.editformO.leader = data.leader;
      this.editformO.teamId = data.teamName;
      this.editformO.value = data.value;
      this.editformO.direction = data.direction;
      axios
        .post(this.url + "/sysuser/getTeamAll", {
          id: this.addformO.id
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.teams = res.data.data;
          }
        });
    },
    // 关闭添加team结构的弹窗
    handleClose() {
      this.addvisiable = false;
      document.documentElement.style.overflow = "auto";
      this.addform.tid = "";
      this.addform.name = "";
      this.$refs.addform.resetFields();
    },
    // 关闭添加组织结构的弹窗
    handleClose1() {
      this.addvisiable1 = false;
      document.documentElement.style.overflow = "auto";
      this.addformO.tid = "";
      this.addformO.name = "";
      this.addformO.leader = "";
      this.$refs.addformO.resetFields();
    },
    // 关闭编辑team结构的弹窗
    handleClose2() {
      this.addvisiable2 = false;
      document.documentElement.style.overflow = "auto";
      this.editform.tid = "";
      this.editform.name = "";
      this.$refs.editform.resetFields();
    },
    //关闭编辑组织结构的弹窗
    handleClose3() {
      this.addvisiable3 = false;
      document.documentElement.style.overflow = "auto";
      this.editformO.tid = "";
      this.editformO.name = "";
      this.editformO.leader = "";
      this.$refs.editformO.resetFields();
    },
    // 确定添加数据team
    addteam(addform) {
      this.$refs[addform].validate(valid => {
        if (valid) {
          axios
            .post(this.url + "/sysuser/insertTeam", {
              id: this.addform.id,
              pid: this.addform.pid,
              tid: this.addform.tid,
              name: this.addform.name
            })
            .then(res => {
              if (res.data.code == -200) {
                this.$message.error("tid已存在，请输入新的tid");
                this.addform = "";
              } else if (res.data.code == 200) {
                this.addvisiable = false;
                this.$refs.addform.resetFields();
                document.documentElement.style.overflow = "auto";
                this.success();
              }
            });
        }
      });
    },

    // 确定添加数据组织
    addteam1(addformO) {
      for (let i = 0, l = this.teams.length; i < l; i++) {
        if (this.teams[i].id === this.addformO.teamId) {
          this.tid = this.teams[i].tid;
        }
      }
      this.$refs[addformO].validate(valid => {
        if (valid) {
          axios
            .post(this.url + "/sysuser/insertCompany", {
              id: this.addformO.id,
              pid: this.addformO.pid,
              name: this.addformO.name,
              leader: this.addformO.leader,
              teamId: this.addformO.teamId,
              value: this.addformO.value,
              direction:this.addformO.direction,
              tid: this.tid
            })
            .then(res => {
              if (res.data.code == 200) {
                this.addvisiable1 = false;
                this.$refs.addformO.resetFields();
                document.documentElement.style.overflow = "auto";
                this.success();
              }
            });
        }
      });
    },
    // 确定编辑数据team
    editteam(editform) {
      this.$refs[editform].validate(valid => {
        if (valid) {
          axios
            .post(this.url + "/sysuser/updateTeam", {
              id: this.editform.id,
              pid: this.editform.pid,
              tid: this.editform.tid,
              name: this.editform.name
            })
            .then(res => {
              if (res.data.code == 200) {
                this.addvisiable2 = false;
                this.$refs.editform.resetFields();
                document.documentElement.style.overflow = "auto";
                this.success();
              }
            });
        }
      });
    },
    // 确定编辑数据组织
    editteam1(editformO) {
      for (let i = 0, l = this.teams.length; i < l; i++) {
        if (this.teams[i].id === this.editformO.teamId) {
          this.tid = this.teams[i].tid;
        }
      }
      this.$refs[editformO].validate(valid => {
        if (valid) {
          axios
            .post(this.url + "/sysuser/updateCompany", {
              id: this.editformO.id,
              pid: this.editformO.pid,
              name: this.editformO.name,
              leader: this.editformO.leader,
              value: this.editformO.value,
              direction: this.editformO.direction,
              tid: this.tid
            })
            .then(res => {
              if (res.data.code == 200) {
                this.addvisiable3 = false;
                this.$refs.editformO.resetFields();
                document.documentElement.style.overflow = "auto";
                this.success();
              }
            });
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    tableshow(row) {
      this.addShow = false;
      this.secondshow = false;
      this.show = false;
      if (this.$refs.userAdd) {
        this.$refs.userAdd.initdata();
      }
      if (this.$refs.custEdit) {
        this.$refs.custEdit.initdata();
      }
      this.type = null;
      this.$nextTick(() => {
        this.$refs.singleTable.setCurrentRow(row);
      });
    },
    remove(data) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        const index = data.id;
        axios
          .post(this.url + "/sysuser/deleteTeam", {
            id: index
          })
          .then(res => {
            if (res.data.code == 200) {
              this.success();
            } else if (res.data.code == -200) {
              this.$message({
                type: "info",
                message: "删除失败，你删除的小组下还有数据！！"
              });
              this.addvisiable = false;
              document.documentElement.style.overflow = "auto";
            }
          })
          .catch(res => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      });
    },
    remove1(data) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        const index = data.id;
        axios
          .post(this.url + "/sysuser/deleteCompany", {
            id: index
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.success();
            } else if (res.data.code == -200) {
              this.$message({
                type: "info",
                message: "删除失败，你删除的小组下还有数据！！"
              });
              this.addvisiable1 = false;
              document.documentElement.style.overflow = "auto";
            }
          })
          .catch(res => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      });
    }
  }
};
</script>
<style scoped>
.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  /* padding-top: 5px; */
  padding-right: 28px;
}
.team {
  min-height: 700px;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
}
.textactive {
  color: #1099ff;
}
</style>
